<template>
  <div class="login">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" labelPosition="top">
      <h2>登录</h2>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="isLoginLoading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

// // 引入request模块
// import request from '@/utils/request'
// // 引入qs安装完毕
// import qs from 'qs'
// 引入封装的接口功能组件
import { login } from '@/services/user'
export default {
  name: 'LoginIndex',
  data () {
    return {
      // 存储表单数据
      form: {
        phone: '18201288771',
        password: '111111'
      },
      // 用于设置表单校验规则
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '密码长度为6~18位', trigger: 'blur' }
        ]
      },
      // 用于保存加载状态
      isLoginLoading: false
    }
  },
  // 登录功能
  methods: {
    // onSubmit () {   //   this.$refs.form.validate(function (valid) {
    //     // console.log(valid)
    //     if(valid) {

    //     } else {

    //     }
    //   })
    // }

    async onSubmit () {
      // await this.$refs.form.validate()
      // console.log(await this.$refs.form.validate())   ======  console.log(valid)-这里需要传值
      try {
        // 1.校验成功之后的功能（请求）
        await this.$refs.form.validate()
        // console.log('通过了校验')
        this.isLoginLoading = true
        // 2.发送登录  请求（request） 需要引入此模块

        // const { data } = await request({
        //   method: 'POST',
        //   url: '/front/user/login',
        //   // urlencoded格式： 名=值&名=值
        //   data: qs.stringify(this.form)
        //   // {
        //   //   phone: this.form.phone,
        //   //   password: this.form.password
        //   // }
        // })
        const { data } = await login(this.form)
        this.isLoginLoading = false
        // 3.响应处理
        if (data.state === 1) {
          // // 如果登录成功就需要跳转到登陆后的页面
          // this.$router.push({
          //   name: 'home'
          // })
          // this.$router.push('home')
          this.$message.success(data.message)
          // 用于信息存储到vuex中
          this.$store.commit('setUser', data.content)
          // 根据可能存在的redirect 数据 进行跳转
          this.$router.push(this.$route.query.redirect || '/')
        } else {
          this.$message.error('登陆失败')
        }
      } catch (err) {
        // 校验失败之后的功能（提示）
        console.log('没有通过校验')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-form{
    background-color: #fff;
    padding: 20px;
    width: 400px;
    border-radius: 10px ;
    .el-button {
      width: 100%;
      margin: 5px;
    }
  }
}
</style>
